<template>
	<view class="market">
		<u-sticky>
			<view class="tabs">
				<u-tabs :list="tabs" @change="change" :inactiveStyle="{ color: '#ffffff', fontSize: '28rpx' }"
					:activeStyle="{ color: '#ffffff', fontSize: '28rpx', fontWeight: 'bold' }" lineColor="#b284dc">
				</u-tabs>
			</view>
		</u-sticky>
		<view class="row" v-for="item of dataConfig.list">
			<view class="header">
				<text class="time">2022-2-16 17:00:00</text>
				<text class="status">发布中</text>
			</view>
			<view class="main">
				<view class="col left">
					<u--image radius="5" width="200rpx" height="200rpx" mode="aspectFill" :src="item.cover">
					</u--image>
				</view>
				<view class="col right">
					<view class="cell">
						<text class="label name">{{item.name}}</text>
						<text class="value nickname">x1</text>
					</view>
					<view class="cell">
						<text class="label">艺术家</text>
						<text class="value nickname">{{item.artistName}}</text>
					</view>
					<view class="cell">
						<text class="label">价格</text>
						<text class="value price">￥{{$util.thousands(item.price)}}</text>
					</view>
					<view class="cell">
						<text class="label">单号</text>
						<view class="value no">
							<text>{{item.orderNo}}</text>
							<text class="iconfont icon-fuzhi" @click.stop="$util.copyTxt(item.orderNo)"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty :show="dataConfig.total == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
		<template v-if="dataConfig.total != 0">
			<u-loadmore :status="dataConfig.loadStatus" />
		</template>
		
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			tabs: {
				type: Array,
				default: () => []
			},
			dataConfig: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {}
		},
		methods: {
			change(cur) {
				this.$emit('changeTabs',cur)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.market {
		.tabs {
			padding: 0 0 20rpx 0;
			background-color: $uni-bg-color;
		}

		.row {
			padding: 20rpx 20rpx;
			margin-bottom: 20rpx;
			background-color: #484b5e;
			border-radius: 10rpx;

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 0 20rpx 0;
				font-size: 25rpx;
			}
		}

		.main {
			background-color: #484b5e;
			display: flex;
			justify-content: space-between;

			.right {
				font-size: 25rpx;
				width: 100%;
				padding-left: 20rpx;

				.name {
					font-weight: bold;
					font-size: 28rpx;
					color: #ffffff;
				}

				.no {
					color: #ffffff;
					display: flex;
					align-items: center;
					.icon-fuzhi {
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}

				.cell {
					display: flex;
					justify-content: space-between;
					padding: 6rpx 0 6rpx 0;
					color: #cacaca;

					.price {
						font-size: 28rpx;
						color: #fac22b;
					}

					.nickname {
						color: #ffffff;
					}
				}
			}

		}
	}
</style>
